{extend name="default/layout" /}

{block name="css"}
<link href="/static/default/css/goods/category.css?v={$static_version}" rel="stylesheet">
{/block}

{block name="content"}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">

    <!-- 内容顶部广告位 -->
    {cms:hooks name="content.top" /}

    <!-- 面包屑导航 -->
    <nav class="flex mb-6" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1">
            <li class="inline-flex items-center">
                <a href="/" class="text-gray-600 hover:text-blue-500 text-sm">首页</a>
            </li>
            {if $category.parent}
            <li>
                <div class="flex items-center">
                    <svg class="w-4 h-4 mx-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                    <a href="{$category.parent.url}" class="text-gray-600 hover:text-blue-500 text-sm">
                        {$category.parent.name}
                    </a>
                </div>
            </li>
            {/if}
            <li aria-current="page">
                <div class="flex items-center">
                    <svg class="w-4 h-4 mx-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                    <span class="text-gray-400 text-sm">{$category.name}</span>
                </div>
            </li>
        </ol>
    </nav>

    <!-- 轻量级筛选区域 -->
    <div class="bg-white rounded-sm p-4 mb-6">

        <!-- 分类筛选 -->
        <div class="flex items-center mb-3">
            <span class="text-sm text-gray-600 mr-3 whitespace-nowrap">分类：</span>
            <div class="flex flex-wrap items-center gap-x-1 gap-y-2">
                <a href="/" class="filter-link {if !$current_category_id}active{/if}">全部</a>
                {if $all_categories}
                    {volist name="all_categories" id="cat"}
                    <a href="{:_url_('goods.category', ['pinyin' => $cat.pinyin])}" class="filter-link {if $current_category_id == $cat.id || ($category.pid > 0 && $category.pid == $cat.id)}active{/if}">{$cat.name}</a>
                    {/volist}
                {/if}
            </div>
        </div>

        <!-- 子分类筛选 -->
        {if $current_category_children && count($current_category_children) > 0}
        <div class="flex items-center mb-3">
            <span class="text-sm text-gray-600 mr-3 whitespace-nowrap">子类：</span>
            <div class="flex flex-wrap items-center gap-x-1 gap-y-2">
                {volist name="current_category_children" id="child"}
                <a href="{:_url_('goods.category', ['pinyin' => $child.pinyin])}" class="filter-link {if $current_category_id == $child.id}active{/if}">{$child.name}</a>
                {/volist}
            </div>
        </div>
        {/if}

        <!-- 排序筛选 -->
        <div class="flex items-center mb-0">
            <span class="text-sm text-gray-600 mr-3 whitespace-nowrap">排序：</span>
            <div class="flex flex-wrap items-center gap-x-1 gap-y-2">
                <a href="{$category.url}" class="filter-link {if !$current_sort || $current_sort == 'default'}active{/if}">默认</a>
                <a href="{$category.url}?sort=price_asc" class="filter-link {if $current_sort == 'price_asc'}active{/if}">价格↑</a>
                <a href="{$category.url}?sort=sales_desc" class="filter-link {if $current_sort == 'sales_desc'}active{/if}">销量↓</a>
                <a href="{$category.url}?sort=time_desc" class="filter-link {if $current_sort == 'time_desc'}active{/if}">热度↓</a>
            </div>
        </div>

    </div>
    <!-- 结果统计 -->
    <div class="flex items-center justify-between mb-6">
        <div class="flex items-center space-x-4">
            <span class="text-sm text-gray-600">
                共找到 {$total} 个商品
            </span>
        </div>
    </div>
<!-- 货币符号标识 -->
<span id="currency-symbol" class="hidden">{:conf('site_currency_symbol')}</span>
    <!-- 商品列表容器 - 响应式布局 -->
    {if $goods_list}
    <div id="goods-container" class="grid grid-cols-1 md:grid-cols-5 gap-3 md:gap-6">
        {volist name="goods_list" id="goods"}
        <a href="{$goods.url}" class="block h-full group" target="_blank">
            <div class="bg-white border border-gray-200 rounded-sm overflow-hidden hover:border-gray-300 transition-colors h-full flex flex-row md:flex-col ">
                <!-- 商品图片 -->
                <div class="relative bg-gray-100 overflow-hidden w-20 h-20 md:w-full md:h-32 flex-shrink-0 md:aspect-w-2 md:aspect-h-1">
                    <img src=""
                         data-src="{$goods.image}"
                         alt="{$goods.name}"    
                         class="w-full h-full object-cover lazy-image rounded md:rounded-t-sm md:rounded-none">
                </div>

                <!-- 商品信息 -->
                <div class="p-3 flex-1 flex flex-col justify-between md:justify-start">
                    <div class="text-sm font-medium text-gray-800 line-clamp-2 leading-tight md:h-10 md:leading-5 flex-1 mb-2">
                        {$goods.name}
                    </div>
                    <div class="flex items-center justify-between md:mt-2">
                        <div class="flex items-center">
                            {if !empty($goods.price)}
                                <span class="text-blue-600 font-bold price-container flex gap-1 items-center">
                                    <span class="text-xs currency-symbol text-blue-500">{:conf('site_currency_symbol')}</span>
                                    <span class="md:text-lg text-base price-number font-semibold">{$goods.price}</span>
                                </span>
                            {else}
                                <span class="text-emerald-500 font-bold text-base">免费</span>
                            {/if}
                        </div>
                        <div class="flex items-center space-x-1">
                            <span class="text-xs text-gray-400">
                                <i class="fas fa-eye mr-1"></i><span class="view-count" data-count="{$goods.views}">{$goods.views}</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </a>
        {/volist}
    </div>

    <!-- 加载更多状态 -->
    <div id="loading-more" class="hidden text-center py-8">
        <div class="inline-flex items-center px-4 py-2 rounded-lg text-gray-600 bg-white border border-gray-200">
            <i class="fas fa-spinner fa-spin mr-2"></i>
            正在加载更多...
        </div>
    </div>

    <div id="no-more-data" class="hidden text-center py-8">
        <div class="inline-flex items-center px-4 py-2  rounded-sm text-gray-500">
            <i class="fas fa-check-circle mr-2"></i>
            已加载全部商品
        </div>
    </div>

    {else}
    <!-- 无商品提示 -->
    <div class="text-center py-20">
        <div class="text-gray-500">
            <i class="fas fa-box-open text-6xl mb-6"></i>
            <h3 class="text-xl font-medium mb-2">暂无商品</h3>
            <p>该分类下还没有商品，请稍后再来看看</p>
        </div>
    </div>
    {/if}

    <!-- 内容底部广告位 -->
    {cms:hooks name="content.bottom" /}
</div>
{/block}



{block name="js"}
<!-- 引入外部JS文件 -->
<script src="/static/default/js/goods/category.js?v={$static_version}"></script>

<!-- 页面初始化 -->
<script>
$(document).ready(function() {
    // 初始化分类页面
    if (typeof CategoryPage !== 'undefined') {
        const currentPage = {$current_page|default=1};
        const totalPages = Math.ceil({$total|default=0} / {$per_page|default=20});
        CategoryPage.init(currentPage, totalPages);
    }
});

</script>
{/block}
